<template>
	<view>
		<view class="bgBox">
			<image class="bg" src="http://s.de123.com/grow/bg.png"></image>
			<view class="memberList">
				<view class="memberBox" @tap="showPicker">
					<view class="imgBox">
						<block v-if="memberList.length == 1"><image src="../../static/userPic.png"></image></block>
						<block v-if="memberList.length >= 2">
							<image src="../../static/userPic.png"></image>
							<image class="mbHp" src="../../static/userPic.png"></image>
						</block>
					</view>
					<view class="toggleBtn">
						<text class="memberName">{{ selectMemberName }}</text>
						<text>{{ memberList.length }}人</text>
						<text class="iconfont icon-right"></text>
					</view>
				</view>
				<text class="addLog iconfont icon-camerafill" @tap="toNewPage" data-url="addGrowthRecoed"></text>
			</view>
		</view>
		<view class="growthEnter">
			<view class="item" @tap="toNewPage" data-url="classTable">
				<view class="enterBg">
					<text class="iconfont icon-kechengguanli"></text>
				</view>
				<text >课表</text>
			</view>
			<view class="item" @tap="toNewPage" data-url="classTime">
				<view class="enterBg">
				<text class="iconfont icon-rizhi"></text>
				</view>
				<text >课次查询</text>
			</view>
			<view class="item" @tap="toNewPage" data-url="leaveList">
				<view class="enterBg">
				<text class="iconfont icon-shenpiguanli"></text>
				</view>
				<text >请假</text>
			</view>
		</view>
		<view class="grList">
			<block v-if="logList.length > 0">
				<block v-for="(item, index) in logList" :key="index">
					<view class="grRow">
						<view class="leftLine">
							<view class="circle"></view>
							<view class="line"></view>
						</view>
						<view class="rightBox">
							<text class="date">{{ item.group }}</text>
							<block v-for="(itm, idx) in item.data" :key="idx">
								<logItem :item="itm" ></logItem>
							</block>
						</view>
					</view>
				</block>
			</block>
			<block v-else>
				<view class="emptyCnt">
					<image src="http://s.de123.com/grow/empty.png" mode="widthFix"></image>
					<text class="">每个瞬间都值得被珍藏，导入学员的照片，留住成长每一步</text>
				</view>
			</block>
		</view>
		<w-picker mode="selector" @confirm="onConfirm" ref="selector" themeColor="#f00" :selectList="selectList"></w-picker>
		<shareAction ref="shareAction" :type="9"></shareAction>
	</view>
</template>

<script>
import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
import TL from '../../common/tool.js';
import wPicker from '../../components/w-picker/w-picker.vue';
import logItem from '@/components/growthRecord/logItem.vue';

export default {
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			isLogin: state => state.user.isLogin
		})
	},
	components: {
		logItem,
		wPicker
	},
	data() {
		return {
			memberList: [],
			logList: [],
			selectMember: '',
			selectMemberName: '全部',
			hasNext: true,
			page_no: 1,
			dateNow: '',
			selectList: [
				{
					label: '全部',
					value: ''
				}
			]
		};
	},
	watch: {
		selectMember(newVal) {
			this.page_no = 1;
			this.hasNext = true;
			this.logList = [];
			this.getLog();
		},
		isLogin(newVal) {
			if (newVal) {
				this.page_no = 1;
				this.hasNext = true;
				this.memberList = [];
				this.logList = [];
				this.getData();
			} else {
				this.page_no = 1;
				this.hasNext = true;
				this.memberList = [];
				this.logList = [];
			}
		}
	},
	methods: {
		onConfirm(e) {
			console.log(e);
			this.selectMember = e.checkArr.value;
			this.selectMemberName = e.checkArr.label;
		},
		showPicker() {
			this.$refs.selector.show();
		},
		getData() {
			this.$store
				.dispatch('apiGetMemberList', {
					userId: this.userInfo.userId,
					page_no: 1,
					page_size: 10
				})
				.then(res => {
					this.memberList = res.data.data.items;
					if (this.memberList.length > 0) {
						let _arr = [];
						this.memberList.forEach((x, i) => {
							_arr[i] = x.id;
							let _obj = {
								label: x.name,
								value: x.id.toString()
							};
							this.selectList[i + 1] = _obj;
						});
						this.selectMember = '';
						this.selectList[0].value = '';
						this.getLog();
					}
				});
		},
		getLog() {
			if (this.hasNext) {
				this.$store
					.dispatch('apiGetMemberLog', {
						userId: this.userInfo.userId,
						memberId: this.selectMember,
						// userId:1,
						// memberId:"1",
						page_no: this.page_no,
						page_size: 10
					})
					.then(result => {
						if (result.data.data.items.length > 0) {
							let _arr = [];
							result.data.data.items.forEach((x, i) => {
								_arr[i] = x;
								if (x.createTime.split(' ')[0].split('-')[0] == this.dateNow.split('-')[0]) {
									_arr[i].date = x.createTime.split(' ')[0] == this.dateNow ? '今天' : TL.datePattern(TL.strToDate(x.createTime.split(' ')[0]), 'M月d日');
								} else {
									_arr[i].date = x.createTime.split(' ')[0] == this.dateNow ? '今天' : TL.datePattern(TL.strToDate(x.createTime.split(' ')[0]), 'yyyy年M月d日');
								}

								_arr[i].time = x.createTime.split(' ')[1].substr(0, 5);
								if (_arr[i].resList) {
									_arr[i].resList = _arr[i].resList.filter((m, n) => {
										return m.type == 1;
									});
								}
							});
							_arr = TL.groupArr(_arr, 'date');
							this.logList = this.logList.concat(_arr);
							this.hasNext = result.data.data.hasNext;
							this.page_no = result.data.data.nextPage;
						}
					});
			} else {
				uni.showToast({
					title: '没有更多的数据了',
					icon: 'none'
				});
			}
		},
		toNewPage(e){
			if (this.isLogin) {
				this.toPage(e)
			} else {
				this.toPage({
					url: 'login'
				});
			}
		}
	},
	onLoad() {
		this.dateNow = new Date().pattern('yyyy-MM-dd');
		if (this.isLogin) {
			this.getData();
		} else {
			this.toPage({
				url: 'login'
			});
		}
		uni.$on('upList',payload=>{
			this.page_no = 1;
			this.hasNext = true;
			this.logList = [];
			this.getLog();
		})
		uni.$on("showLogShare",payload=>{
			console.log(payload);
			let _memberName=this.memberList.filter(x=>{
				return x.id==payload.mid
			})
			let _href='';
			_href='logDetail/logDetail?id='+payload.id+','+_memberName[0].name
			this.$refs.shareAction.setShareData({
				title:_memberName[0].name+'的新变化',
				img:payload.img,
				href:_href,
				cntText:'快来看看吧'
			})
			this.$refs.shareAction.open()
		})
	},
	// 下拉刷新
	onPullDownRefresh() {
		if (this.isLogin) {
			setTimeout(() => {
				this.page_no = 1;
				this.hasNext = true;
				this.logList = [];
				this.getLog();

				uni.stopPullDownRefresh();
			}, 1500);
		} else {
			uni.stopPullDownRefresh();
			this.toPage({
				url: 'login'
			});
		}
	},
	// 页面滚动到底部
	onReachBottom() {
		this.getLog();
	}
};
</script>

<style lang="less">
.bgBox {
	position: relative;
	height: 370upx;
	.bg {
		position: absolute;
		width: 100%;
		height: 370upx;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.memberList {
		display: flex;
		padding: 80upx 20upx;
		align-items: center;
		justify-content: space-between;
		.memberBox {
			display: flex;
			align-items: center;
			.imgBox {
				display: flex;
				image {
					width: 110upx;
					height: 110upx;
					border-radius: 50%;
					position: relative;
					z-index: 2;
					border: 2upx solid #ffffff;
				}
				image ~ .mbHp {
					margin-left: -80upx;
					z-index: 1;
				}
			}
			.toggleBtn {
				height: 66upx;
				display: flex;
				align-items: center;
				border-radius: 33upx;
				padding-left: 50upx;
				padding-right: 10upx;
				border: 2upx solid rgba(255, 255, 255, 0.75);
				font-size: 28upx;
				color: #ffffff;
				margin-left: -40upx;
				background-color: rgba(48, 169, 233, 0.75);
				.memberName {
					margin-right: 20upx;
				}
			}
		}
	}
}
.grList {
	padding: 40upx 70upx;
	display: flex;
	flex-direction: column;
}
.grRow {
	display: flex;
	margin-bottom: 10upx;
	.leftLine {
		display: flex;
		flex-direction: column;
		align-items: center;
		.circle {
			width: 16upx;
			height: 16upx;
			border: 4upx solid #ffc815;
			border-radius: 50%;
			margin-bottom: 10upx;
		}
		.line {
			width: 6upx;
			flex-grow: 1;
			border-radius: 3upx;
			background-color: #ffc815;
		}
	}
	.rightBox {
		display: flex;
		flex-direction: column;
		padding-left: 20upx;
		padding-bottom: 10upx;
		flex-grow: 1;
		.date {
			font-size: 32upx;
			margin-top: -16upx;
			margin-bottom: 36upx;
		}
	}
}
.emptyCnt {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 60upx;
	image {
		width: 60%;
		margin-bottom: 40upx;
	}
	text {
		width: 80%;
		text-align: center;
		font-size: 28upx;
		font-size: 28upx;
		color: #c3c9d6;
	}
}
.addLog{
	color: #FFFFFF;
	font-size: 48upx;
	width: 74upx;
	height: 74upx;
	border-radius: 50%;
	text-align: center;
	line-height: 70upx;
	background-color: rgba(48, 169, 233, 0.75);
	border: 2upx solid rgba(255, 255, 255, 0.75);
}
.growthEnter{
	display: flex;
	justify-content: space-around;
	padding: 30upx 50upx;
	.item{
		display: flex;
		flex-direction: column;
		align-items: center;
		text{
			font-size: 28upx;
		}
		.enterBg{
			width: 80upx;
			height: 80upx;
			line-height: 80upx;
			background-color: #ffcc32;
			text-align: center;
			border-radius: 10upx;
			margin-bottom: 16upx;
			.iconfont{
				color: #FFFFFF;
				font-size: 56upx;
			}
			
		}
	}
}
</style>
